<template>
	<view>
		<view class="empty" v-if="entity.length == 0">
			<view class="title">
				<image src="/static/kongbg.png" mode="widthFix" style="width: 90%;"></image>
				<text style="font-size: 22px;color: #3c6fd4;font-weight: bolder;">暂无数据~</text>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{height: height+'px'}" @scrolltolower="lower">
			<view class="cell" v-for="(item ,index) in entity" :index="index" :key="item.No" @click="toCheck(item)">
				<image v-show="item.ApprovalType==='开票审批'" class="tag" src="../../static/t2.png"></image>
				<image v-show="item.ApprovalType==='退票审批'" class="tag" src="../../static/t3.png"></image>
				<text class="bold">
					<image class="no" src="../../static/no.png"></image>
					{{item.No}}
				</text>
				<text class="des">{{item.Title}}</text>
				<hr>
				<text>
					<image class="time" src="../../static/date.png"></image>
					<b class="info">申请日期</b>
					<b class="dt">{{item.Time.substring(0,16)}}</b>
				</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reFresh: "",
				UserId: '',
				entity: {},
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					SortField: "CreateTime",
					SortType: "desc",
				},
				height: 800,
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
				}
			}
		},
		onShow() { //mei次回到页面都会调用下拉刷新
			uni.startPullDownRefresh()
			this.getDatalist()
		},
		onLoad(option) {
			uni.startPullDownRefresh()
			console.log(option);
			this.UserId = option.Id;
		},
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.page++;
				this.getDatalist() //调用加载数据方法
			} else {
				console.log('已加载全部数据')
			}
		},
		onPullDownRefresh() {
			this.list = []
			//调用获取数据方法
			this.getDatalist()
			setTimeout(() => {
				//结束下拉刷新
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {

			toCheck(obj) {
				uni.navigateTo({
					url: '../check/check?obj=' + JSON.stringify(obj) + '&Id=' + this.UserId
				});
			},
			getDatalist() {
				this.$http('/InvoiceManagement/Inv_InvoiceApplyMain/GetOperatorInfoPending', {
					"PageIndex": 1,
					"PageRows": 10,
					"SortField": "Time",
					"SortType": "desc",
				}).then(res => {
					console.log(res);
					if (res.Success) {
						this.entity = res.Data
						this.total = res.Data.Total
						//新数据push到列表中
						const newlist = res.Data.Total
						this.list.push(...newlist)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					}
				})
			},
			  
			}
		}
</script>

<style>
	page {
		background: #f5f5f5;
	}

	.cell {
		margin: 20px;
		border-radius: 5px;
		box-shadow: 0 0 10px #999;
		background: #fff;
		padding: 10px
	}

	text {
		display: block;
		margin: 8px;
		color: #333;
		overflow: hidden;
	}

	hr {
		background: #ccc;
		border: none;
		height: 1px;
	}

	.no {
		float: left;
		width: 20px;
		height: 20px;
	}

	.time {
		float: left;
		width: 16px;
		height: 16px;
	}

	.bold {
		font-weight: 600;
	}

	.info {
		color: #999;
		float: left;
		margin-left: 3px;
		font-weight: 500;
	}

	.des {
		color: #666;
	}

	.dt {
		float: right;
		font-weight: 500;
		color: #666;
	}

	.tag {
		position: absolute;
		width: 46px;
		height: 46px;
		margin-top: -10px;
		right: 20px;
		border-top-right-radius: 5px;
	}

	.empty {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		margin-top: 90px;

	}
</style>